import { Modal, Space, Radio, Popover, List } from 'antd';
import styles from './style.less';
import { connect, Link, history } from 'umi';
import { useEffect, useState } from 'react';
import UserBrief from '@/components/UserBrief'
import EnterpriseUserSelect from '@/components/EnterpriseUserSelect'
import TextButton from '@/components/TextButton'
import { EditOutlined, TeamOutlined } from '@ant-design/icons'
import { PROJECT_ACL } from '@/consts/doc'

const AclPop = (props) => {
    const {
        projectId,
        docId,
        aclUsers,
        acl,
        onCancel,
        onSave,
        editPermiission,
    } = props;

    const [aclModalVisible, setAclModalVisible] = useState(false);

    const renderAcl = () => {
        switch (acl) {
            case PROJECT_ACL.ReadPublic:
                return <span>公开读</span>
            case PROJECT_ACL.WritePerson:
                return <span>成员可编辑<TeamOutlined /></span>
            case PROJECT_ACL.WritePublic:
                return <span>公开读写</span>
        }

    }

    const renderAclName = () => {
        switch (acl) {
            case PROJECT_ACL.ReadPublic:
                return "公共读"
            case PROJECT_ACL.WritePerson:
                return "成员可编辑"
            case PROJECT_ACL.WritePublic:
                return "公开读写"
        }

    }
    const content = (
        <div>
            <Space>
                <span>{renderAclName()}</span>
                {editPermiission && <TextButton onClick={() => {
                    setAclModalVisible(true)
                }}><EditOutlined /></TextButton>}
            </Space>
            {acl === PROJECT_ACL.WritePerson && <List dataSource={aclUsers}
                renderItem={item => (
                    <List.Item className={styles.aclUserItem}>
                        <UserBrief user={item} />
                    </List.Item>
                )} />}
        </div>

    )
    return <div>
        <Popover content={content} overlayClassName={styles.aclUserPopover} placement="bottomRight">
            <div className={styles.aclIcon}>{renderAcl()}</div>
        </Popover>
        <AclUserModal visible={aclModalVisible}
            projectId={projectId}
            docId={docId}
            editPermiission={editPermiission}
            onCancel={() => {
                setAclModalVisible(false)
                if (onCancel) {
                    onCancel()
                }
            }}
            onSave={(userData) => {
                if (onSave) {
                    onSave(userData)
                }
                setAclModalVisible(false)
            }}
            acl={acl}
            aclUsers={aclUsers}
        ></AclUserModal>
    </div>

}


const AclUserModal = (props) => {

    const {
        projectId,
        aclUsers,
        visible,
        onCancel,
        onSave,
        acl
    } = props;

    const [changeAclData, setChangeAclData] = useState({});

    useEffect(() => {
        if (visible) {
            setChangeAclData({
                acl: acl,
                aclUsers: aclUsers
            })
            console.log(acl, aclUsers)
        } else {
            setChangeAclData({
            })
        }
    }, [visible])


    const userIds = aclUsers?.map(user => user.id) || []
    if (visible) {
        return <Modal
            title="编辑权限"
            visible={visible}
            closable={true}
            onCancel={() => {
                if (onCancel) {
                    setChangeAclData({})
                    onCancel();
                }
            }}
            onOk={() => {
                if (onSave) {
                    if (changeAclData.acl === PROJECT_ACL.WritePerson) {
                        onSave(changeAclData)
                    } else {
                        onSave({
                            acl:changeAclData.acl
                        })
                    }
                    setChangeAclData({})

                }
            }}
        >
            <Radio.Group defaultValue={acl} onChange={(e) => {
                setChangeAclData({
                    ...changeAclData,
                    acl: e.target.value
                })
            }}>
                <Radio value={PROJECT_ACL.ReadPublic}>公共读</Radio>
                <Radio value={PROJECT_ACL.WritePerson}>成员可编辑</Radio>
                <Radio value={PROJECT_ACL.WritePublic}>开放读写</Radio>
            </Radio.Group>

            {changeAclData.acl === PROJECT_ACL.WritePerson && (<EnterpriseUserSelect
                onChange={(userIds, users) => {
                    setChangeAclData({
                        ...changeAclData,
                        userIds: userIds,
                        aclUsers: users
                    })
                }}
                value={userIds}
                projectId={projectId}
                className={styles.userSelect}
                ismultiple={true} />)}
        </Modal>
    }

    return (<div >
    </div>)
}

export default AclPop